<template>
  <div>
    <div style="margin-top: 1%">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item >首页</el-breadcrumb-item>
        <el-breadcrumb-item>采购入库</el-breadcrumb-item>
        <el-breadcrumb-item>入口信息</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--搜索区域-->
    <div>
      <el-form :inline="true" :model="formInline">
        <el-form-item label="单据编号">
          <el-input v-model="formInline.djbh" placeholder="单据编号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getDatas">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table
        :data="dataWithPage"
        style="width: 100%">
        <el-table-column v-for="item in tableColumn "
                         :prop="item.prop"
                         :label="item.label"
                         :width="item.width"
                         :key="item.id">
        </el-table-column>
        <el-table-column   fixed="right"
                           label="审核标志">
          <template slot-scope="shbzSlot">
            <span v-if="shbzSlot.row.shbz ==0" style="color: red">未审核</span>
            <span v-else style="color: green">已审核</span>
          </template>
        </el-table-column>

        <el-table-column
          fixed="right"
          label="操作"
          width="150">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
            <el-button v-if="scope.row.shbz == 0" @click="handleChangeStatus(scope.row.id)" type="text" size="small">审核</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页-->
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="limitData.length">
      </el-pagination>

      <!--添加-->
      <el-dialog title="收货地址" :visible.sync="showAddDialog">
        <el-form :model="form" :rules="rules" ref="ruleform" label-width="80px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="商品名" prop="pingpai">
                <el-input v-model="form.pingpai" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="品牌" prop="spm">
                <el-input v-model="form.spm" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="sku代码" prop="skudm">
                <el-input type="number" v-model="form.skudm" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="规格" prop="guige">
                <el-input v-model="form.guige" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="类目" prop="leimu">
                <el-input v-model="form.leimu" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="单位" prop="danwei">
                <el-input v-model="form.danwei" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="产品属性" prop="cpsx">
                <el-input v-model="form.cpsx" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="标准价" prop="bzj">
                <el-input v-model="form.bzj" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="标准折扣" prop="bzzk">
                <el-input v-model="form.bzzk" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="showAddDialog = false">取 消</el-button>
          <el-button type="primary" @click="handleConfine">确 定</el-button>
        </div>
      </el-dialog>
    </div>

  </div>
</template>

<script>
  import {mapActions, mapMutations} from 'vuex';
  import CgrkApi from "../../../api/CgrkApi";
  import CgddApi from "../../../api/CgddApi";
  import CgsqdApi from "../../../api/CgsqdApi";

  export default {
    name: 'index',
    data() {
      return {
        activeIndex: 1,
        currentPage: 1,
        pageSize: 5,
        formInline: {
          djbh: '',
          region: '',

        },
        tableColumn: [
          {
            prop: 'djbh',
            label: '单据编号',
          },
          {
            prop: 'wlzdm',
            label: '物料代码',
          }, {
            prop: 'wlmc',
            label: '物料名称',
          },
          {
            prop: 'danjia',
            label: '单价',
          }, {
            prop: 'gys',
            label: '供应商',
          }, {
            prop: 'ggxh',
            label: '规格型号',
          }, {
            prop: 'shuliang',
            label: '数量',
          }, {
            prop: 'jiner',
            label: '金额',
          }, {
            prop: 'cgriqi',
            label: '采购日期',
          }, {
            prop: 'slck',
            label: '收料仓库',
          },
          {
            prop: 'bumen',
            label: '部门',
          },{
            prop: 'zdr',
            label: '制单人',
          },
        ],
        tableData: [
          {
            id: 1,
            bumen: '销售部',
            danjia: '12',
            djbh: '45545454',
            danwei: '单位1',
            fktj: '到付',
            gys: '北京lGONS',
            ggxh: '122*21',
            jiner: '1213',
            riqi: '2020-12-10',
            shbz: '未审核',
            sssl: '12',
            slck: '仓库a',
            wlzdm: '1212313',
            wlmc: '物料xx',
            ywy: '小刚',
          }, {
            id: 2,
            bumen: '销售部',
            danjia: '12',
            djbh: '45545454',
            danwei: '单位1',
            fktj: '到付',
            gys: '北京lGONS',
            ggxh: '122*21',
            jiner: '1213',
            riqi: '2020-12-10',
            shbz: '未审核',
            sssl: '12',
            slck: '仓库a',
            wlzdm: '1212313',
            wlmc: '物料xx',
            ywy: '小刚',
          },
        ],
        tableData2: this.$store.getters.skuDatas,
        showAddDialog: false,
        dialogFormVisible: false,
        form: {
          id: 1,
          pingpai: '',
          spm: '',
          skudm: '',
          guige: '',
          leimu: '',
          danwei: '',
          cpsx: '',
          bzj: '',
          bzzk: '',
          jdrq: new Date(),
          jdzt: '使用中',
        },
        rules: {
          pingpai: [
            {required: true, message: '请输入商品名', trigger: 'blur'},
          ], spm: [
            {required: true, message: '请输入品牌', trigger: 'blur'},
          ], skudm: [
            {required: true, message: '请输入sku代码', trigger: 'blur'},
          ], guige: [
            {required: true, message: '请输入规格', trigger: 'blur'},
          ], leimu: [
            {required: true, message: '请输入类目', trigger: 'blur'},
          ], danwei: [
            {required: true, message: '请输入单位', trigger: 'blur'},
          ], cpsx: [
            {required: true, message: '请输入产品属性', trigger: 'blur'},
          ], bzj: [
            {required: true, message: '请输入标准价', trigger: 'blur'},
          ],

        }
      };
    }
    ,
    mounted() {
      console.log(this.$store.getters.skuDatas);
      console.log(this.$store.getters.cangkuDatas);
      // this.tableData  = this.$store.getters.skuDatas;
      this.getDatas();
    },
    computed:{
      limitData() {
        let data = [...this.tableData];
        return data;
      },
      // 因为要动态计算总页数，所以还需要一个计算属性来返回最终给 Table 的 data
      dataWithPage() {
        const data = this.limitData;
        const start = this.currentPage * this.pageSize - this.pageSize;
        const end = start + this.pageSize;
        return [...data].slice(start, end);
      },
    },
    methods: {
      // T和Z时间转换
      changeDate(oldDate) {
        var dateee = new Date(oldDate).toJSON();//这个ie不兼容，会返回1970年的时间
        var date = new Date(+new Date(dateee) + 8 * 3600 * 1000)
          .toISOString()
          .replace(/T/g, " ")
          .replace(/\.[\d]{3}Z/, "");
        return date;
      },
      //查询数据
      getDatas(){
        CgrkApi.findByPage({
          djbh:this.formInline.djbh
        })
          .then(res => {
            // 返回数据
            if(res.flag){
              for (let i = 0;i<res.data.length;i++){
                res.data[i].cgriqi = this.changeDate(res.data[i].cgriqi )
              }
              this.tableData = res.data;
            }
          })
          .catch(err => {
            // 异常情况
          })
      },
      handleCurrentChange(val) {
        this.currentPage = val;
      },
      ...mapMutations('user', ['addSkuDatas', 'updateSkuDatas', 'deleteSkuDatas']),
      //确认添加
      handleConfine() {
        var validate = false;
        this.$refs['ruleform'].validate((valid) => {
          if (valid) {
            validate = true;
          } else {
            console.log('error submit!!');
            validate = false;
            return false;
          }
        });
        if (validate === false) {
          return;
        }
        setTimeout(() => {
          this.form.id = Math.ceil(Math.random() * 100);
          // this.tableData.push(this.form);
          // this.$store.commit('addSkuDatas',this.form)
          this.addSkuDatas(this.form)
          this.tableData = this.$store.getters.skuDatas;

        }, 2000)
        this.showAddDialog = false;
        this.$message.success("添加成功!");

      },
      handleDelete(id) {
        this.$confirm('是否确定删除', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          CgrkApi.delete({
            id:id
          })
            .then(res => {
              // 返回数据
              if(res.flag){
                this.$message.success("删除成功!");
                //删除成功后，再次查询数据，获取最新数据库中的数据
                this.getDatas();
              }
            })
            .catch(err => {
              // 异常情况
            })
        }).catch(() => {
        });
      },
      //确认订单状态
      handleChangeStatus(id) {
        //重置审核状态
        // 数据进入采购订单页
        CgrkApi.update({
          id:id,
          shbz:'1'
        })
          .then(res => {
            // 返回数据
            if(res.flag){
              // this.showAddDialog = false;
              this.$message.success("审核成功!");
              this.getDatas();
            }
          })
          .catch(err => {
            // 异常情况
          })
      },
      handelAdd() {
        this.showAddDialog = true;
      }
    },
  };
</script>

<style scoped>

</style>
